<template>
	<a-layout>
		<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible class="admin_layout_sider">
			<div class="admin_logo">
				<img style="width: 80%; height: auto" src="../../assets/logo/LOGO.png">
			</div>
			<div class="dashboard-box" @click="toDashboard('/dashboard')">
                <span class="ic">
                    <a-icon type="fund" theme="filled"/>
                    <span>数据看板</span>
                </span>
			</div>
			<a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys" :open-keys="openKeys" class="menus"
			        @openChange="onOpenChange">
				<a-sub-menu :key="index" v-for="(menu, index) in menuEntities">
					<template #title>
                        <span>
	                        <a-icon :type="menu.menuClass" theme="filled"/>
	                        <span>{{ menu.menuName }}</span>
                        </span>
					</template>
					<a-menu-item :key="index+'-'+k" @click="toPath(child.url)" v-for="(child, k) in menu.menuEntities">
						{{ child.menuName }}
					</a-menu-item>
				</a-sub-menu>
			</a-menu>
		</a-layout-sider>
		<a-layout>
			<a-layout-header class="admin_layout_header">
				<a-icon type="compass"/>
				{{ this.$store.state.routerName.routerName }}
			</a-layout-header>
			<a-layout-content class="admin_layout_content">
				<router-view></router-view>
			</a-layout-content>
		</a-layout>
	</a-layout>
</template>
<script>

import {api, post} from "@/api/api";

export default {
	name: "Index",
	data() {
		return {
			collapsed: false,
			openKeys: [""],
			selectedKeys: [''],
			path: '/dashboard',
			menuEntities: [],
			userEntity: {},
			centerEntity: {},
		}
	},
	created() {
		let adminEntity = window.sessionStorage.getItem ( 'adminEntity' )
		post ( api.GetMenus, {roleId: JSON.parse ( adminEntity ).roleId, type: 1} ).then ( res => {
			this.menuEntities = res.data.data
			// 遍历菜单，当刷新页面时上一个选中的菜单常亮
			this.menuEntities.forEach ( ( item, index ) => {
				item.menuEntities.forEach ( ( c, j ) => {
					if ( this.$route.path == '/' + c.url ) {
						this.selectedKeys = [index + '-' + j]
						this.openKeys = [index]
					}
				} )
			} )
		} )
	},
	watch: {
		$route( to, from ) {
			this.$router.push ( to.path )
		},
	},
	methods: {
		toDashboard( path ) {
			const routeUrl = this.$router.resolve ( {
				path: path,
			} );
			window.open ( routeUrl.href, "_blank" );
			//window.open ( path, "_blank" );
		},
		toPath( path ) {
			this.$router.push ( path )
		},
		/*只展开一个菜单项*/
		onOpenChange( openKeys ) {
			if ( openKeys.length !== 0 ) {
				this.openKeys = [openKeys[1]]
			} else {
				this.openKeys = [""]
			}
		},
	},
	mounted() {
	},
}
</script>

<style lang="less">
/*需要配合commons里使用，完成首页table框架的美化*/
.admin_layout_sider {
	height: 100vh;
}

.admin_logo {
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.admin_logo img {
	width: 126px;
	height: 40px;
	object-fit: contain;
}

.menus {
	height: calc(100vh - 90px);
	overflow: hidden auto;
}

.admin_layout_header {
	padding: 0 24px;
	height: 50px;
	line-height: 50px;
	background: #fff;
	box-shadow: 0px 2px 5px 0px #dfdfdf;
	z-index: 1;
}

.ant-layout {
	display: flex;
	flex: auto;
	flex-direction: column;
	min-height: 0;
}

.admin_layout_content {
	position: relative;
	overflow: hidden;
	height: 0;
}

.ant-menu-inline .ant-menu-item {
	margin-top: 0 !important;
}

.dashboard-box {
	height: 40px;
	line-height: 40px;
	cursor: pointer;
}

.dashboard-box span {
	color: rgba(255, 255, 255, 0.65);
	width: 100%;
}

.dashboard-box .ic {
	display: inline-block;
	width: 100%;
	padding-left: 24px;
}

.dashboard-box i {
	color: rgba(255, 255, 255, 0.65);
	margin-right: 10px;
}

.dashboard-box .ic:hover {
	color: #fff !important;
}
</style>
